<?php
use_helper('I18N');
?>
<style type="text/css">

.clear {
    clear: both;
}
.tree-genealogy {
    height: 700px;
    overflow: auto;
    width: 600px;
}
.controller-node-con {
    min-width: 413px;
}
.tree-controller, .tree-controller-in {
    height: 48px;
    width: 28px;
}
.tree-controller-dash, .tree-controller-dashplus, .tree-controller-dashminus {
    background: url("/css/network/leaf_h.png") repeat-x scroll 0 24px transparent;
    float: left;
    margin-left: 16px;
    width: 12px;
}
.tree-controller-wrap, .tree-controller-l-wrap {
    margin-left: 28px;
}
.tree-controller-wrap {
    background: url("/css/network/leaf.png") repeat-y scroll 16px 0 transparent;
}
.tree-controller-tplus-line, .tree-controller-lplus-line, .tree-controller-tminus-line, .tree-controller-lminus-line, .tree-controller-t-line, .tree-controller-l-line {
    float: left;
    margin-left: 16px;
    width: 12px;
}
.tree-controller-lplus-line, .tree-controller-lminus-line, .tree-controller-l-line {
    background: url("/css/network/leaf.png") repeat-y scroll 0 0 transparent;
    float: left;
    height: 24px;
}
.tree-controller-lplus-right, .tree-controller-tplus-right, .tree-controller-tminus-right, .tree-controller-lminus-right, .tree-controller-l-right, .tree-controller-t-right {
    background: url("/css/network/leaf_h.png") repeat-x scroll 0 24px transparent;
    float: left;
    width: 12px;
}
.tree-controller-dash img, .tree-controller-dashplus img, .tree-controller-dashminus img, .tree-controller-tminus-right img, .tree-controller-lminus-right img, .tree-controller-tplus-right img, .tree-controller-lplus-right img {
    margin-left: -4px;
}
img.tree-minus-button, img.tree-plus-button {
    margin-top: 20px;
}
img.tree-minus-button:hover, img.tree-plus-button:hover {
    cursor: pointer;
}
.node-info-raw {
    height: 48px;
    overflow: hidden;
    width: 385px;
}
</style>

<script type="text/javascript" language="javascript">
    var datagrid = null;
    $(function() {

    }); // end function
</script>

<div class="row">
    <div class="col-md-12">
        <h2 class="page-title"><?php echo __("Sponsor Genealogy"); ?>
            <small></small>
        </h2>
    </div>
</div>
<div class="row">
    <div class="col-md-7">
        <section class="widget">
            <header>
                <h4>
                    <i class="icon-ok-sign"></i>
                    <?php echo __("Search member from your genealogy"); ?>
                    <small></small>
                </h4>
            </header>
            <div class="body">
                <form class="form-horizontal label-left" method="post"
                      action="/member/sponsorTree"
                      data-validate="parsley"
                      id="sponsorForm" name="sponsorForm">
                    <fieldset>
                        <legend class="section">
                        <?php echo __("Sponsor Genealogy")?>
                        </legend>
                        <?php include_component('component', 'alert', array('param' => $sf_user->getAttribute(Globals::SESSION_DISTID, 0))) ?>
                        <div class="row">
                            <div class="col-sm-8">
                                <div class="control-group">
                                    <label class="control-label" for="transactionPassword">
                                    <?php echo __("Search By Username")?>
                                    </label>

                                    <div class="controls form-group">
                                        <input type="text" id="txtFullName" name="fullName" class="form-control" value="<?php echo $fullName?>">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <div class="form-actions">
                        <button type="button" id="btnSubmit" class="btn btn-primary"><?php echo __("Search");?></button>
                        <a href="/member/summary" class="btn btn-default"><?php echo __("Cancel");?></a>
                    </div>
                </form>
            </div>
        </section>
    </div>
</div>
<div class="row">
    <div class="col-md-7">
        <section class="widget">
            <div class="body">
                <link rel='stylesheet' type='text/css' media='screen' href='/css/network/gentree.css'/>

                <script type="text/javascript">
                $(document).ready(function(){
                    $("#btnSubmit").click(function(event){
                        event.preventDefault();
                        $("#sponsorForm").submit();
                    });
                    $('img.tree-minus-button').on('click', function(){
//                        $(this).removeClass('tree-minus-button');
//                        $(this).addClass('tree-plus-button');
                        $(this).attr('class', 'tree-plus-button');
                        var nodeId = $(this).parent().parent().next().attr('id').replace(/^node\-id\-/, '');
                        $('#node-wrapper-'+nodeId).slideUp(200);
                        $(this).attr('src', '/css/network/plus.png');
                    });

                    $('img.tree-plus-button').on('click', function(){
                        $(this).attr('class', 'tree-minus-button');
//                        $(this).removeClass('tree-plus-button');
//                        $(this).addClass('tree-minus-button');
                        var nodeId = $(this).parent().parent().next().attr('id').replace(/^node\-id\-/, '');
                        if($('#node-wrapper-'+nodeId).attr('class').match(/ajax\-more/)){
                            $('#node-wrapper-'+nodeId).removeClass('ajax-more');
                            ajaxLoadNode(nodeId);
                        }
                        $('#node-wrapper-'+nodeId).slideDown(200);
                        $(this).attr('src', '/css/network/minus.png');
                    });

                    function ajaxLoadNode(nodeId){
                        $('#node-wrapper-'+nodeId).html('<img src="/css/network/spinner.gif">');
                        $.ajax({
                            url: '/member/manipulateSponsorTree?root='+nodeId,
                            type: 'post',
                            dataType: 'html',
                            error: function(){
                                debug('error loading nodes for ' + nodeId);
                            },
                            success: function(data){
                                $('#node-wrapper-'+nodeId).html(data);
                            },
                            complete: function(){
                            }
                        });
                    }

                    function debug(str){
                        alert(str);
                    }
                });
                </script>
                <div class="tree-genealogy">
                    <?php
                        $treeLine = "tree-controller-lplus-line";
                        $treeLine2 = "tree-controller-lplus-right";
                        $treeLineNoChild = "tree-controller-t-line";
                        $treeLineNoChild2 = "tree-controller-t-right";
                        $treeControllerWrap = "tree-controller-wrap";
                        $img = "<img class='tree-plus-button' src='/css/network/plus.png'>";
                        if ($idx == $count) {
                            $treeLineNoChild = "tree-controller-l-line";
                            $treeLineNoChild2 = "tree-controller-l-right";
                            $treeControllerWrap = "tree-controller-l-wrap";
                        }

                        if ($hasChild) {
                        } else {
                            $img = "";
                            $treeLine = $treeLineNoChild;
                            $treeLine2 = $treeLineNoChild2;
                        }
                    ?>
                    <div class="<?php echo $treeControllerWrap;?>">
                        <div class="controller-node-con">
                            <div class="tree-controller <?php echo $treeLine;?>">
                                <div class="tree-controller-in <?php echo $treeLine2;?>">
                                    <?php echo $img; ?>
                                </div>
                            </div>
                            <div id="node-id-<?php echo $distinfo->getDistributorId();?>" class="node-info-raw">
                                <div class="node-info">
                                    <span class="user-rank"><img src="/css/network/<?php echo $headColor; ?>_head.png"></span>
                                    <span class="user-id"><?php echo $distinfo->getDistributorCode(); ?></span>
                                    <span class="user-joined"><?php echo __('Joined'); ?> <?php echo date('Y-m-d', strtotime($distinfo->getActiveDatetime())); ?></span>
                                    <span class="user-joined"><?php echo __($distinfo->getStatusCode()); ?></span>
                                </div>
                            </div>
                        </div>
                        <?php
                        if ($hasChild) {
                        ?>
                        <div class=" ajax-more" id="node-wrapper-<?php echo $distinfo->getDistributorId();?>"></div>
                        <?php } ?>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>